import Sprite from '../base/sprite';

/**
 * 可拖拽植物类
 * 继承自Sprite，添加拖拽功能和释放事件监听
 */
export default class DraggablePlant extends Sprite {
  isDragging = false; // 是否正在拖拽
  offsetX = 0; // 鼠标按下位置相对于植物左上角的X偏移
  offsetY = 0; // 鼠标按下位置相对于植物左上角的Y偏移
  releaseCallback = null; // 释放事件回调函数
  originalX = 0; // 原始X位置
  originalY = 0; // 原始Y位置

  constructor(imgSrc = '', width = 0, height = 0, x = 0, y = 0) {
    super(imgSrc, width, height, x, y);
    this.initDragEvents();
  }

  /**
   * 初始化拖拽事件
   */
  initDragEvents() {
    // 监听鼠标按下事件（微信小程序）
    wx.onMouseDown(this.onMouseDown.bind(this));
    // 监听触摸开始事件（移动设备 - 微信小程序）
    wx.onTouchStart(this.onTouchStart.bind(this));

    // 监听鼠标移动事件（微信小程序）
    wx.onMouseMove(this.onMouseMove.bind(this));
    // 监听触摸移动事件（移动设备 - 微信小程序）
    wx.onTouchMove(this.onTouchMove.bind(this));

    // 监听鼠标释放事件（微信小程序）
    wx.onMouseUp(this.onMouseUp.bind(this));
    // 监听触摸结束事件（移动设备 - 微信小程序）
    wx.onTouchEnd(this.onTouchEnd.bind(this));
  }

  /**
   * 鼠标按下事件处理
   */
  onMouseDown(e) {
    const { offsetX, offsetY } = this.getEventPosition(e);
    // 检查是否点击在植物上
    if (this.isPointInPlant(offsetX, offsetY)) {
      this.startDrag(offsetX, offsetY);
    }
  }

  /**
   * 触摸开始事件处理
   */
  onTouchStart(e) {
    // 移除e.preventDefault()，微信小程序中不需要
    const { offsetX, offsetY } = this.getEventPosition(e);
    if (this.isPointInPlant(offsetX, offsetY)) {
      this.startDrag(offsetX, offsetY);
    }
  }

  /**
   * 鼠标移动事件处理
   */
  onMouseMove(e) {
    if (this.isDragging) {
      const { offsetX, offsetY } = this.getEventPosition(e);
      this.updatePosition(offsetX, offsetY);
    }
  }

  /**
   * 触摸移动事件处理
   */
  onTouchMove(e) {
    if (this.isDragging) {
      // 移除e.preventDefault()，微信小程序中不需要
      const { offsetX, offsetY } = this.getEventPosition(e);
      this.updatePosition(offsetX, offsetY);
    }
  }

  /**
   * 鼠标释放事件处理
   */
  onMouseUp(e) {
    if (this.isDragging) {
      this.stopDrag();
    }
  }

  /**
   * 触摸结束事件处理
   */
  onTouchEnd(e) {
    if (this.isDragging) {
      this.stopDrag();
    }
  }

  /**
   * 获取事件位置（相对于canvas）
   */
  getEventPosition(e) {
    // 微信小程序中获取canvas尺寸
    const { windowWidth, windowHeight } = wx.getSystemInfoSync();
    // 判断是触摸事件还是鼠标事件
    if (e.type && e.type.startsWith('touch')) {
      // 微信小程序触摸事件
      const touch = e.touches[0];
      return {
        offsetX: touch.clientX,
        offsetY: touch.clientY
      };
    } else {
      // 鼠标事件
      return {
        offsetX: e.clientX,
        offsetY: e.clientY
      };
    }
  }

  /**
   * 检查点是否在植物范围内
   */
  isPointInPlant(x, y) {
    return x >= this.x && x <= this.x + this.width &&
           y >= this.y && y <= this.y + this.height;
  }

  /**
   * 开始拖拽
   */
  startDrag(x, y) {
    this.isDragging = true;
    // 记录原始位置
    this.originalX = this.x;
    this.originalY = this.y;
    // 计算偏移量
    this.offsetX = x - this.x;
    this.offsetY = y - this.y;
    // 提升层级（可以通过修改z-index或绘制顺序实现）
    this.zIndex = 100;
  }

  /**
   * 更新位置
   */
  updatePosition(x, y) {
    this.x = x - this.offsetX;
    this.y = y - this.offsetY;
  }

  /**
   * 停止拖拽
   */
  stopDrag() {
    this.isDragging = false;
    this.zIndex = 1;
    // 触发释放回调
    if (typeof this.releaseCallback === 'function') {
      this.releaseCallback(this.x, this.y);
    }
    // 恢复原始位置
    this.x = this.originalX;
    this.y = this.originalY;
  }

  /**
   * 设置释放事件回调
   */
  onRelease(callback) {
    this.releaseCallback = callback;
  }

  /**
   * 重写render方法，添加拖拽状态的视觉反馈
   */
  render(ctx) {
    super.render(ctx);
    // 如果正在拖拽，添加半透明效果
    if (this.isDragging) {
      ctx.save();
      ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
      ctx.fillRect(this.x, this.y, this.width, this.height);
      ctx.restore();
    }
  }
}